<template>
  <div style="width: 100%;height: 100%">
  <el-row :gutter="10" style="padding-top: 10px;padding-left: 10px;width: 100%">
    <el-col
        v-for="(article, index) in articleList"
        :key="article"
        :span="4"
        :offset="0"
    >
      <el-card :body-style="{ padding: '5px' }" style="padding-top: 30px">
        <img
            :src=getImgUrl(article.coverImage)
            class="image"
        />
        <div style="padding: 20px;">
          <span>{{article.title}}</span><br/>
          <div class="bottom">
            <time class="time">创建时间：{{ article.createDate }}</time>
            <el-button style="padding-right: 1px" text class="button" @click="LookButton(this.userId,this.clickEvent,article.id)">点击查看</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <div class="demo-pagination-block">
    <div class="demonstration"></div>
    <h4>总页数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button @click="refreshNowView" size="small" type="info" plain style="padding-right: 20px"><h2 style="font-family: 华文楷体">刷新推荐</h2></el-button>
    </h4>
    <el-pagination
        v-model:current-page=current
        :page-size=size
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, prev, pager, next"
        :total=total
        @size-change="getSizeChange"
        @current-change="getCurrentPage"
    />
  </div>
  </div>
</template>

<script>

import request from "@/utils/request";
import router from "@/router";
import displayArticleView from "@/views/body/displayArticleView";



export default {
  name: "NowCard",

  components:{
    displayArticleView
  },

  created() {
    this.load()
  },

  methods:{
    load(){
      let user=sessionStorage.getItem("User")
      this.userId=JSON.parse(user).userId
      //获取最新文章
      request.get("/articles/getNowArticles/"+this.current).then(res => {
        console.log(res.data)
        if (res.data == 500) {
          alert("用户id返回错误,返回登陆页面!")
          router.push("/LoginView")
        } else {
          this.articleList=res.data.records
          console.log(res.data.records)
          this.total=res.data.total
          this.size=res.data.size
          this.pages=res.data.pages
        }
      })
    },

    getSizeChange() {

    },

    getCurrentPage(current){
      // alert(current)
      //获取当前页文章
      request.get("/articles/getNowArticles/"+current).then(res => {
        console.log(res.data)
        if (res.data == 500) {
          alert("用户id返回错误,返回最新文章页面!")
          router.push("/NowView")
        } else {
          this.articleList=res.data.records
          console.log(res.data.records)
          this.total=res.data.total
          this.size=res.data.size
          this.pages=res.data.pages
        }
      })
    },

    LookButton(userId,clickEvent,articleId){
      //埋点
      request.post("/log/getClickArticleLog/"+userId+"/"+encodeURI(this.clickEvent)+"/"+articleId).then(res => {
        console.log(res.data)
      })

      router.push({
        name:"displayArticleView",
        query:{
          articleId: articleId,
        }
      })
    },

    getImgUrl(image){
        return "http://192.168.10.100:8888/articleimages/"+image
    },

    refreshNowView(){
        router.push("/NowView")
    }

  },

  data(){
    return{
      articleList: [],
      total: 6,
      size: 12,
      current: 1,
      pages: 10,

      userId:'',
      clickEvent:'点击最新文章',
    }
  },

}
</script>

<style>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>